<template>
	<globalModal
		:title="title"
		:visible="visible"
		:width="800"
		:bodyStyle="bodyStyle"
		:confirmLoading="confirmLoading"
		@ok="handleOk"
		@cancel="handleCancel"
	>
		<a-spin :spinning="confirmLoading">
			<a-form :form="form" autocomplete="off" :labelCol="labelCol" :wrapperCol="wrapperCol">
				<a-form-item label="报告名称">
					<a-input
						placeholder="请输入报告名称"
						v-decorator="['topTitle', { rules: [{ required: true, message: '请输入报告名称' }] }]"
					/>
				</a-form-item>
				<a-form-item label="年级">
					<a-radio-group
						style="margin-top: 8px"
						v-decorator="['gradeId', { rules: [{ required: true, message: '请选择年级' }] }]"
					>
						<a-radio :value="item.gradeId" v-for="(item, index) in gradeList" :key="index">
							{{ item.gradeName }}
						</a-radio>
					</a-radio-group>
				</a-form-item>
				<a-form-item label="各科目使用试卷">
					<div>
						<a-input
							style="display: none"
							v-decorator="[
								'testQuestIds',
								{
									rules: [
										{
											required: true,
											message: '请至少选择一套试卷',
										},
									],
								},
							]"
							placeholder="passenger name"
						/>
						<div v-for="(item, index) in testList" :key="item.testQuestId" class="flex flex-align-center">
							<label
								class="circle"
								:style="{ background: filterName(item.subjectName, subjectTypeColorEnum) }"
							>
								{{ item.subjectName ? item.subjectName.slice(0, 1) : '' }}
							</label>
							<div>{{ item.title }}</div>
							<a-icon
								class="dynamic-delete-button"
								type="minus-circle-o"
								@click="() => removeTest(item.testQuestId)"
							/>
						</div>
					</div>
					<a-button type="dashed" style="width: 60%" @click="addTest">
						<a-icon type="plus" /> 选择添加各科目试卷
					</a-button>
				</a-form-item>
			</a-form>
		</a-spin>
		<testlistModal ref="testlistModal" @ok="confirmTest"></testlistModal>
	</globalModal>
</template>

<script>
import { sysManageapi } from '@/api/index.js';
import { ModalMixins } from '@/mixins';
import testlistModal from './testlistModal.vue';
import { subjectTypeColorEnum, testPaperTypeEnum } from '@/utils/enumeration.js';
import { filterOption, filterName } from '@/utils/base.js';
export default {
	name: 'monthtestReportModal',
	mixins: [ModalMixins],
	data() {
		return {
			classList: [], //班级数组
			title: '综合分析报告',
			mdl: {},
			gradeList: [],
			bodyStyle: {
				maxHeight: '450px',
				minHeight: '100px',
				overflow: 'auto',
			},
			testList: [],
			subjectTypeColorEnum,
			filterName,
		};
	},
	components: { testlistModal },
	methods: {
		show() {
			this.testList = [];
			this.getGradeList();
			this.visible = true;
		},
		//年级
		getGradeList() {
			return this.$postAction(sysManageapi.gradeUrl.getAllList, {
				orgId: this.globalOrgId || '',
			}).then((res) => {
				if (res && res.code == 1) {
					this.gradeList = res.data;
				}
			});
		},
		//班级
		getClassList(deptId) {
			return this.$postAction(sysManageapi.classUrl.getAllList, {
				orgId: this.globalOrgId || '',
				deptId: deptId,
			}).then((res) => {
				if (res && res.code == 1) {
					this.classList = res.data;
				}
			});
		},

		handleOk() {
			const _this = this;
			// 触发表单验证
			this.form.validateFields((err, values) => {
				// 验证表单没错误
				if (!err) {
					/* 处理地址 */
					let parameter = {};
					this.confirmLoading = true;
					this.downloadMonthReport(values);
					this.$emit('ok');
					this.handleCancel();
				}
			});
		},

		//下载月考报告
		downloadMonthReport(params) {
			// let testQuestIds = params.testQuestIds.join(',');
			console.log('testQuestIds', testQuestIds);
			let url =
				sysManageapi.exportUrl.downSumReport +
				'?testQuestIds=' +
				params.testQuestIds +
				'&gradeId=' +
				params.gradeId +
				'&topTitle=' +
				params.topTitle;
			this.$postActionExport(url)
				.then((res) => {
					let BlobFile = res;
					console.log(BlobFile);
					let blobObject = new Blob([BlobFile], {
						type: 'application/vnd.ms-excel,charset=utf-8',
						//type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,charset=utf-8",
					}); //如果是字节流
					//是IE浏览器
					if (!!window.ActiveXObject || 'ActiveXObject' in window) {
						window.navigator.msSaveOrOpenBlob(blobObject, fileName);
					} else {
						//火狐谷歌都兼容
						//模板中要有一个预定义好的a标签
						var link = document.createElement('a');
						link.href = window.URL.createObjectURL(blobObject); //如果是字节流
						//link.href = BlobFile;
						link.target = '_blank';
						link.download = '《' + params.topTitle + '》' + '.xlsx';
						link.click();
						//释放内存
						//window.URL.revokeObjectURL(link.href)
					}
					this.$message.success('导出成功');
				})
				.finally((res) => {
					setTimeout(() => {
						this.confirmLoading = false;
					}, 800);
				});
		},
		handleCancel() {
			this.$emit('close');
			this.visible = false;
		},
		addTest() {
			let gradeId = this.form.getFieldValue('gradeId');
			if (!gradeId) {
				this.$message.error('请先选择年级');
				return;
			}
			this.$refs.testlistModal.show({ gradeId }, this.testList);
		},
		confirmTest(list) {
			if (this.testList.length == 0) {
				this.testList = [...list];
			} else {
				for (var i = 0; i < list.length; i++) {
					let info = list[i];
					if (this.testList.some((item) => item.subjItemCode == info.subjItemCode)) {
						this.$message.error('已经存在科目为' + info.subjectName + '的试卷');
						return;
					} else {
						this.testList.push(info);
					}
				}
			}
			let testQuestIds = this.testList.map((item) => item.testQuestId);
			console.log('testQuestIds', testQuestIds);
			this.form.setFieldsValue({ testQuestIds: testQuestIds.join(',') });
		},
		removeTest(id) {
			this.testList = this.testList.filter((item) => item.testQuestId != id);
			let testQuestIds = this.testList.map((item) => item.testQuestId);
			this.form.setFieldsValue({ testQuestIds: testQuestIds.join(',') });
		},
	},
};
</script>

<style scoped>
.dynamic-delete-button {
	cursor: pointer;
	position: relative;
	font-size: 24px;
	color: #f5222d;
	transition: all 0.3s;
	margin-left: 10px;
}

.dynamic-delete-button[disabled] {
	cursor: not-allowed;
	opacity: 0.5;
}
.circle {
	width: 23px;
	height: 23px;
	line-height: 23px;
	border-radius: 100%;
	text-align: center;
	color: #fff;
	background: #00bec5;
	margin-right: 10px;
}
</style>
